<html>
	<head>
		<title>footnote tips</title>
		<style>
		#text{display:none;}
		</style>
		<script type="text/javascript" src="../jQuery/jquery_1.4.2.js"></script>
	</head>
	<body>
	<p>there are some words ,and these words only for <br>testthere are some words ,and these words only for <br>testthere are some words ,
		and these words only for test
		<sup><a rel="footnote" href="#text">4</a></sup>
		there are some words ,and these words only for test
	</p>
	<div id="text">haha,can you see me !~</div>
	
	<script>
		// this script requires jQuery
		$(document).ready(function() {
				Footnotes.setup();
		});
		
		var Footnotes = {
				footnotetimeout: false,
				setup: function() {
						var footnotelinks = $("a[rel='footnote']")
						
						footnotelinks.unbind('mouseover',Footnotes.footnoteover);
						footnotelinks.unbind('mouseout',Footnotes.footnoteoout);
						
						footnotelinks.bind('mouseover',Footnotes.footnoteover);
						footnotelinks.bind('mouseout',Footnotes.footnoteoout);
				},
				footnoteover: function() {
						clearTimeout(Footnotes.footnotetimeout);
						$('#footnotediv').stop();
						$('#footnotediv').remove();
						
						var id = $(this).attr('href').substr(1);
						var position = $(this).offset();
				
						var div = $(document.createElement('div'));
						div.attr('id','footnotediv');
						div.bind('mouseover',Footnotes.divover);
						div.bind('mouseout',Footnotes.footnoteoout);
		
						var el = document.getElementById(id);
						div.html($(el).html());
						
						div.css({
								position:'absolute',
								width:'400px',
								border:'1px solid #ccc',
								'min-height':'50px',
								'height':'50px',
								opacity:0.9
						});
						$(document.body).append(div);
		
						var left = position.left;
						if(left + 420  > $(window).width() + $(window).scrollLeft())
								left = $(window).width() - 420 + $(window).scrollLeft();
						var top = position.top+20;
						if(top + div.height() > $(window).height() + $(window).scrollTop())
								top = position.top - div.height() - 15;
						div.css({
								left:left,
								top:top
						});
				},
				footnoteoout: function() {
						Footnotes.footnotetimeout = setTimeout(function() {
								$('#footnotediv').animate({
										opacity: 0
								}, 600, function() {
										$('#footnotediv').remove();
								});
						},100);
				},
				divover: function() {
						clearTimeout(Footnotes.footnotetimeout);
						$('#footnotediv').stop();
						$('#footnotediv').css({
										opacity: 0.9
						});
				}
		}
	</script>
	</body>
</html>